
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="HandheldFriendly" content="true">
        <!-- 微软的老式浏览器 -->
        <meta name="MobileOptimized" content="320">
        <!-- uc强制竖屏 -->
        <meta name="screen-orientation" content="portrait">
        <!-- QQ强制竖屏 -->
        <meta name="x5-orientation" content="portrait">
        <!-- UC强制全屏 -->
        <meta name="full-screen" content="yes">
        <!-- QQ强制全屏 -->
        <meta name="x5-fullscreen" content="true">
        <!-- windows phone 点击无高光 -->
        <meta name="msapplication-tap-highlight" content="no">
        <title>律师阁</title>
        <!--<link href="css/swiper.min.css" rel="stylesheet" type="text/css"/>-->
        <link href="css/mPage.css" rel="stylesheet" type="text/css"/> 
        <link href="css/animate.css" rel="stylesheet" type="text/css"/>
        <script src="js/rem.js" type="text/javascript"></script>
          <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
        <script src="js/swiper.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div style="max-width:750px; margin:0 auto;">
            <!--|预加载动画|-->
            <div class="preloader"></div>
            <!--|内容展示|-->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <!--第一页-->
                    <div class="swiper-slide slide1">
                        <img src="static/image/m_banner1_logo.png" class="logo"/>
                        <img src="static/image/m_banner1_phone.png" class="phone"/>
                        <img src="static/image/m_banner1_wave.png" class="bar"/>
                        <img src="static/image/m_arrow.png" class="arrow" />
                    </div>
                    <!--第二页-->
                    <div class="swiper-slide slide2">
                        <div class="word_bar">
                            <img src="static/image/m_banner2_text.png" class="here"/>
                            <p class="word1">汇聚了全国优秀的专业律师</p>
                            <p class="word2">为您答疑解惑，并提供免费服务</p>
                            <p class="word3">只为让您更放心</p>
                        </div>
                        <img src="static/image/m_arrow.png" class="arrow"/>
                        <img src="static/image/m_banner2_lower.png" class="lower_line"/>
                        <img src="static/image/m_banner2_upper.png" class="upper_line" />
                    </div>
                    <!--第三页-->
                    <div class="swiper-slide slide3">
                        <div class="word_bars">
                            <img src="static/image/m_banner2_text.png" class="here"/>
                            <p class="words1">全国案源任你选</p>
                            <p class="words2">这里是您为百姓解忧的平台</p>
                            <p class="words3">是您展现专业能力的舞台</p>
                            <p class="words4">是您成为资深律师的优选之途</p>
                        </div>
                        <img src="static/image/m_banner3_upper.png" class="lower_line"/>
                        <img src="static/image/m_banner3_lower.png" class="upper_line" class="lower_line"/>
                        <img src="static/image/m_banner3_text.png" class="join_us"/>
                        <img src="static/image/m_arrow.png" class="arrow"/>
                    </div>
                    <!--第四页-->
                    <div class="swiper-slide slide4">
                        <img src="static/image/m_banner4_text1.png" class="title"/>
                        <img src="static/image/m_banner4_text2.png" class="stitle"/>
                        <a href="http://lvshi.jjr18.com/download/app-release.encrypted_signed_Aligned.apk" class="download"><img src="static/image/m_banner4_btn.png"/></a>
                        <img src="static/image/m_banner4_phone.png" class="iphone"/>
                        <img src="static/image/m_banner4_phone_text.png" class="screen" />
                        <img src="static/image/m_banner4_bg.png" class="gray"/>
                    </div>
                </div>
                <!--swiper-wrapper end-->
            </div>
            <!--swiper-container end-->
            <style type="text/css">
                .ui-mask{width: 100%;height: 100%;position: fixed;background: #000000;opacity: 0.5;z-index: 98;left: 0px;top: 0px;display: none;}
                .ui-alert{display: none;position: fixed;z-index: 99;top: 0.5rem;left: 5%;width: 90%;}
                .ui-alert img{width: 100%;}
            </style>
            <div class="ui-mask"></div>
            <div class="ui-alert">
                <img src="static/image/lianjie.png"/>
            </div>
        </div>
      

        <script type="text/javascript">
            // Preloader
            $(window).load(function () {
                $(".preloader").fadeOut("slow");
            });
            function fixPagesHeight() {
                if ($(window).width() > 750) {
                    $('.swiper-slide,.swiper-container').css({height: $(window).height(), width: $(window).height() * 750 / 1334});
                    $("html").css({fontSize: $(window).height() * 100 / 1334 + "px"});
                } else {
                    $('.swiper-slide,.swiper-container').css({
                        height: $(window).height(),width:$(window).width()
                    });
                }
            }
            fixPagesHeight();
            $(window).on('resize', function () {
                fixPagesHeight();
            });
            var tick = setTimeout(function () {
                fixPagesHeight();
            }, 500);
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                mousewheelControl: true,
                watchSlidesProgress: true,
                observer: true,
                observeParents: true,
//                onInit: function (swiper) {
//                    swiper.myactive = 0;
//                    swiperAnimateCache(swiper); //隐藏动画元素 
//                    swiperAnimate(swiper); //初始化完成开始动画
//                },
//                onSlideChangeEnd: function (swiper) {
//                    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
//                },
                onProgress: function (swiper) {
                    for (var i = 0; i < swiper.slides.length; i++) {
                        var slide = swiper.slides[i];
                        var progress = slide.progress;
                        var translate, boxShadow;
                        translate = progress * swiper.height * 0.8;
                        scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
                        boxShadowOpacity = 0;
                        slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';
                        if (i === swiper.myactive) {
                            es = slide.style;
                            es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
                            es.zIndex = 0;
                        } else {
                            es = slide.style;
                            es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = '';
                            es.zIndex = 1;
                        }
                    }
                },
                onTransitionEnd: function (swiper, speed) {
                    for (var i = 0; i < swiper.slides.length; i++) {
                    }
                    swiper.myactive = swiper.activeIndex;
                },
                onSetTransition: function (swiper, speed) {
                    for (var i = 0; i < swiper.slides.length; i++) {
                        es = swiper.slides[i].style;
                        es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
                    }
                }
            });
        </script>
        <script type="text/javascript">　
                    //设备判断
                    var u = navigator.userAgent;
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            //如果是iOS
            if (isiOS) {
                $('.slide4 .download').attr('href', 'https://itunes.apple.com/cn/app/%E5%BE%8B%E5%B8%88%E9%98%81/id1262355816?mt=8');
            } else {
                $('.slide4 .download').attr('href', 'http://lvshi.jjr18.com/download/app-release.encrypted_signed_Aligned.apk');
            }

            var ua = navigator.userAgent.toLowerCase();

            var isWeixin = ua.indexOf('micromessenger') !== -1;

            if (isWeixin) {
                //如果是微信
                $('.slide4 .download').attr('href', 'javascript:void(0);');
                $('.slide4 .download').click(function () {
                    $('.ui-mask').fadeIn();
                    $('.ui-alert').show();
                });
                $('.ui-mask').click(function () {
                    $('.ui-mask').fadeOut();
                    $('.ui-alert').hide();
                });
                $('.ui-alert').click(function () {
                    $('.ui-mask').fadeOut();
                    $('.ui-alert').hide();
                });
            } else {
                //如果不是微信
            }
        </script>
    </body>
</html>

